import React from 'react'
// 一般都是在根组件中配置前端路由规则. 因为Route组件在哪里使用,则Route组件中配置的页面组件就渲染在哪里
import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
export default function App() {
  return (
    <div id="app">
      {/* 最终渲染在页面上的是a标签,Link在哪里使用,则a标签就渲染在哪里.当用户点击这个a标签的时候,会自动修改浏览器地址栏的路径,但是不发送请求 */}
      <Link to="/home">首页</Link>
      <Link to="/login">登录</Link>
      {/* <Link to="/xxx/yyy">登录</Link> */}
      <hr />
      {/* Route是用来配置前端路由规则的. 按照react-rouerv6版本要求Route必须被Routes包裹 */}
      <Routes>
        {/* Route中path的值可以忽略/ .但是如果要忽略请求全部忽略 */}
        {/* 如果path=""就表示path="/" */}
        <Route path="" element={<Home></Home>}></Route>
        <Route path="home" element={<Home></Home>}></Route>
        <Route path="login" element={<Login></Login>}></Route>

        {/* <Route path="xxx">
          <Route path="yyy" element={<Login></Login>}></Route>
        </Route> */}
      </Routes>
      <hr />
    </div>
  )
}
